<template>
	<view class="search" :style="{height:navHeight}">
		<s-nav v-model="data.value" type="2" @search="search" />
	</view>
	<view class="log" v-if="data.log.length">
		<view class="hd">
			<text>历史搜索</text>
			<icon class="iconfont icon" @click="clearLog()">&#xe7b7;</icon>
		</view>
		<view class="bd">
			<view class="item" :key="index" v-for="(item,index) in data.log" @click="searchLog(item)">
				<text>{{item}}</text>
			</view>
		</view>
	</view>
	<view class="hot" v-if="data.hot.length">
		<view class="hd">
			<text>推荐搜索</text>
		</view>
		<view class="bd">
			<view class="item" :key="index" v-for="(item,index) in data.hot" @click="searchHot(item)">
				<text>{{item.name}}</text>
			</view>
		</view>
	</view>
</template>
<script setup>
	import { ref, reactive, getCurrentInstance, computed } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { isEmpty } from '@/common/utils/index.js';
	import { showModal } from '@/common/hooks/useShow.js';
	let eventChannel = null;
	const key = 'SEARCHLOGS';
	const maxlog = 5;
	const data = reactive({
		value: '',
		tabIndex: 0,
		from: '',
		log: uni.getStorageSync(key) ? uni.getStorageSync(key) : [],
		hot: [{ name: '法律咨询', value: 74 }, { name: '教案撰写', value: 30 }, { name: '标书撰写', value: 19 }, { name: 'PPT定制', value: 27 }, { name: '内容修改', value: 8 }]
	});
	onLoad((options) => {
		data.value = options.keyword ? options.keyword : '';
		data.tabIndex = options.tab ? options.tab : 0;
		data.from = options.from ? options.from : 'index';
		// const instance = getCurrentInstance().proxy;
		// eventChannel = instance.getOpenerEventChannel();
	});
	const navHeight = computed(() => {
		return `${getApp().globalData.navHeight}px`;
	});

	function search() {
		if (isEmpty(data.value)) return uni.showToast({
			icon: 'none',
			title: '请输入内容'
		});
		setLogs();
		uni.redirectTo({
			url: `/subpages/search/list/list?keyword=${data.value}&tab=${data.tabIndex}`
		})
	}

	function searchHot(item) {
		// eventChannel.emit('acceptDataFromOpenedPage', { type: 'service', ...item });
		uni.redirectTo({
			url: `/subpages/search/list/list?service=${JSON.stringify(item)}&tab=${data.tabIndex}`
		})
	}

	function searchLog(v) {
		data.value = v;
		search();
	}

	function setLogs() {
		if (isEmpty(data.value)) return;
		let logs = uni.getStorageSync(key) ? uni.getStorageSync(key) : [];
		logs = logs.filter(item => item != data.value);
		logs.unshift(data.value);
		logs = logs.filter((item, index) => index < maxlog);
		uni.setStorage({
			key: key,
			data: logs
		})
	}

	function clearLog() {
		showModal({
			title: '',
			content: '确认删除历史搜索吗？',
			confirm() {
				data.log = [];
				uni.setStorage({
					key: key,
					data: null
				})
			}
		})
	}
</script>
<style scoped lang="scss">
	@import '@/common/css/base.scss';
	.search {
		padding-bottom: 10rpx;
		border-bottom: 1px solid #eee;
	}
	.log,
	.hot {
		padding: 10rpx 30rpx;
		.hd {
			@include flex;
			height: 70rpx;
			line-height: 70rpx;
			text {
				font-size: 30rpx;
				color: #888;
			}
			.icon {
				font-size: 30rpx;
				color: #888;
			}
		}
		.bd {
			@include flex(row, flex-start);
			margin: 0 -10rpx;
			.item {
				max-width: 240rpx;
				line-height: 56rpx;
				margin: 10rpx;
				padding: 0 20rpx;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				background-color: #f2f5f9;
				border-radius: 28rpx;
				font-size: 26rpx;
				color: #111;
			}
		}
	}
</style>
